window.addEventListener("load", function () {
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// API分类区
	// 命名一个空的html结构
	let hmtl = "";
	// 将数组遍历
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			hmtl += `<span class="active" title="${v.keyword}">${v.name}</span>`;
		} else if (v.isnew) {
			hmtl += `<span class="fw-b" title="${v.keyword}">${v.name}</span>`;
		} else {
			// 每遍历一次给html加上一个结构
			hmtl += `<span title="${v.keyword}">${v.name}</span>`;
		}
	});
	// 将获得的结构渲染给页面
	$("#box11").innerHTML = hmtl;
	// 设置点击事件
	$("#box11 span").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#box11 span").forEach(function (vv) {
				vv.classList.remove("active");
			});
			v.classList.add("active");
			$("#inp").value = v.title;
			$("strong").textContent = v.textContent;
		});
	});

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	//   声明一个空的html结构

	// listDataArr.forEach(function (v) {
	// 	if (v.isSpecial) {
	// 		html2 += `<div class="rel cp">
	// 	<div class="text-c abs">企业专用</div>
	//     <img src="../imgs/${v.img}" alt="" />
	//     <p>${v.name}</p>
	//     <span class='price'>${v.price} </span>
	//     <button class="text-c abs">申请数据</button>
	// </div>`;
	// 	} else {
	// 		html2 += `<div class="rel cp">
	//     <img src="../imgs/${v.img}" alt="" />
	//     <p>${v.name}</p>
	//     <span>${v.price} </span>
	//     <button class="text-c abs">申请数据</button>
	// </div>`;
	// 	}
	// });
	// $("#box2>div").innerHTML = html2;

	// 获取页数、每页条数、数据库来源
	// pages,5,listDataArr
	// 封装函数
	function pager(total, totalsise, listDataArr) {
		let html2 = "";
		listDataArr
			.slice(Number(total), Number(total) + totalsise)
			.forEach(function (v) {
				if (v.isSpecial) {
					html2 += `<div class="rel cp">
			<div class="text-c abs">企业专用</div>
			<img src="../imgs/${v.img}" alt="" />
			<p>${v.name}</p>
			<span class='price'>${v.price} </span>
			<button class="text-c abs">申请数据</button>
		</div>`;
				} else {
					html2 += `<div class="rel cp">
			<img src="../imgs/${v.img}" alt="" />
			<p>${v.name}</p>
			<span>${v.price} </span>
			<button class="text-c abs">申请数据</button>
		</div>`;
				}
			});
		$("#box2>div").innerHTML = html2;
	}
	// 给分页器点击效果i
	$("#box3 .span").forEach(function (v, i) {
		$("#box3 .span")[0].classList.add("active2");
		v.addEventListener("click", function () {
			$("#box3 .span").forEach(function (vv) {
				vv.classList.remove("active2");
			});

			v.classList.add("active2");
			pager(v.textContent, 5, listDataArr);
		});
	});
	// 添加下一页的点击事件
	$("#box3 .Next-pages").addEventListener("click", function () {
		// 点击获得激活的span;
		// $(".active2");
		// 获取span的pages并加一获得下一个ii
		let ii = Number($(".active2").textContent) + 1;
		// 加入判断，如果ii的等于了数组的长度就回归到0
		if (ii >= 5) {
			ii = 0;
			// 先给下一页上激活样式类名
			$("#box3 .span")[ii].classList.add("active2");
			// 再清除上一页激活的span的激活类名
			$("#box3 .span")[$("#box3 .span").length - 1].classList.remove("active2");
			// 引用pager函数将内容渲染到页面上
			pager($("#box3 .span")[ii].textContent, 5, listDataArr);
		} else {
			// 先给下一页上激活样式类名
			$("#box3 .span")[ii - 1].classList.add("active2");
			// 再清除上一页激活的span的激活类名
			$("#box3 .span")[ii - 2].classList.remove("active2");
			// 引用pager函数将内容渲染到页面上
			pager($("#box3 .span")[ii - 1].textContent, 5, listDataArr);
		}
	});
	// 上一页的点击事件
	$("#box3 .Last-pages").addEventListener("click", function () {
		// 点击获得激活的span;
		// $(".active2");
		// 获取span的pages并减一获得上一个iii
		let iii = Number($(".active2").textContent) - 1;
		// 加入判断，如果ii的等于了数组的长度就回归到0
		if (iii === 0) {
			iii = $("#box3 .span").length - 1;
			// 先给上一页上激活样式类名
			$("#box3 .span")[iii].classList.add("active2");
			// 再清除下一页激活的span的激活类名
			$("#box3 .span")[0].classList.remove("active2");
			// 引用pager函数将内容渲染到页面上
			pager($("#box3 .span")[iii].textContent, 5, listDataArr);
		} else {
			// 先给上一页上激活样式类名
			$("#box3 .span")[iii - 1].classList.add("active2");
			// 再清除下一页激活的span的激活类名
			$("#box3 .span")[iii].classList.remove("active2");
			// 引用pager函数将内容渲染到页面上
			pager($("#box3 .span")[iii - 1].textContent, 5, listDataArr);
		}
	});

	pager(1, 5, listDataArr);

	// 获取点击事件祖辈节点
	// 设置点击事件
	$("#box2>div").addEventListener("click", function (e) {
		// 设置冒泡事件
		if (e.target.localName === "button") {
			// 显示蒙层
			$("#mask").style.display = "block";
			$("body").style.overflowY = "hidden";
		}
	});
	// 给蒙层设置点击事件
	$("#mask").addEventListener("click", function (e) {
		if (e.target.id === "mask") {
			this.style.display = "none";
			$("body").style.overflowY = "auto";
		}
	});

	// 登录框的js

	tabs($(".loadbtn"), $("#cars form"));
});
